<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>购物车页面</title>

		<link href="static/css/amazeui.css" rel="stylesheet" type="text/css" />
		<link href="static/css/demo.css" rel="stylesheet" type="text/css" />
		<link href="static/css/cartstyle.css" rel="stylesheet" type="text/css" />
		<link href="static/css/optstyle.css" rel="stylesheet" type="text/css" />

		<script type="text/javascript" src="static/js/jquery.js"></script>
		<script type="text/javascript" src="static/js/jquery-1.7.min.js"></script>
		<!-- 引入 layui.css -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.5/dist/css/layui.css">
		<!-- 引入 layui.js -->
		<script src="//unpkg.com/layui@2.6.5/dist/layui.js"></script>

	</head>

	<body>
		<div id="container">
		<!--顶部导航条 -->
			<div class="am-container header">
				<ul class="message-l">
					<div class="topMessage">
						<div v-if="isLogin" class="menu-hd">
							{{username}},欢迎您！
						</div>
						<div v-else class="menu-hd">
							<a href="#" target="_top" class="h">亲，请登录</a>
							<a href="#" target="_top">免费注册</a>
						</div>
					</div>
				</ul>
				<ul class="message-r">
					<div class="topMessage home">
						<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
					</div>
				</ul>
			</div>
			<!--悬浮搜索框-->
			<div class="nav white">
				<div class="logo"><img src="static/images/logo.png" /></div>
				<div class="logoBig">
					<li><img src="static/images/logo.png" style="height: 75px;width: 200px"/></li>
				</div>

				<div class="search-bar pr">
					<a name="index_none_header_sysc" href="#"></a>
					<form>
						<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
						<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
					</form>
				</div>
			</div>

			<div class="clear"></div>

			<!--购物车 -->
			<div class="concent">
				<div id="cartTable">
					<div class="cart-table-th">
						<div class="wp">
							<div class="th th-chk">
								<div id="J_SelectAll1" class="select-all J_SelectAll">
								</div>
							</div>
							<div class="th th-item">
								<div class="td-inner">商品信息</div>
							</div>
							<div class="th th-price">
								<div class="td-inner">单价</div>
							</div>
							<div class="th th-amount">
								<div class="td-inner">数量</div>
							</div>
							<div class="th th-sum">
								<div class="td-inner">金额</div>
							</div>
							<div class="th th-op">
								<div class="td-inner">操作</div>
							</div>
						</div>
					</div>
					<div class="clear"></div>

					<div class="clear"></div>
					<template v-for="sc,index in shopcarts">
						<tr class="item-list">
							<div class="bundle  bundle-last ">
								<div class="bundle-main">
									<ul class="item-content clearfix">
										<li class="td td-chk">
											<div class="cart-checkbox ">
												<input style="margin-top: 40px" class="check" id="J_CheckBox_170769542747" v-model="opts" :value="index" type="checkbox">
												<label for="J_CheckBox_170769542747"></label>
											</div>
										</li>
										<li class="td td-item">
											<div class="item-pic">
												<a href="#" target="_blank" :data-title="sc.productName" class="J_MakePoint" data-point="tbcart.8.12">
												<img :src="'static/pimgs/'+sc.productImg" height="70"  class="itempic J_ItemImg"></a>
											</div>
											<div class="item-info">
												<div class="item-basic-info">
													<a :href="'introduction.html?pid='+sc.productId" target="_blank" :title="sc.productName" class="item-title J_MakePoint" data-point="tbcart.8.11">{{sc.productName}}</a>
												</div>
											</div>
										</li>
										<li class="td td-info">
											<div class="item-props item-props-can">
												<span class="sku-line">{{sc.skuProps}}</span>
												<i class="theme-login am-icon-sort-desc"></i>
											</div>
										</li>
										<li class="td td-price">
											<div class="item-price price-promo-promo">
												<div class="price-content">
													<div class="price-line">
														<em class="price-original">{{sc.originalPrice}}</em>
													</div>
													<div class="price-line">
														<em class="J_Price price-now" tabindex="0">{{sc.sellPrice}}</em>
													</div>
												</div>
											</div>
										</li>
										<li class="td td-amount">
											<div class="amount-wrapper ">
												<div class="item-amount ">
													<div class="sl">
														<input class="min am-btn" name="" type="button" value="-" :data-id="index" @click="changeNum" data-oper="-"/>
														<input class="text_box" name="" type="text" :value="sc.cartNum" style="width:30px;" />
														<input class="add am-btn" name="" type="button" value="+" :data-id="index" @click="changeNum"  data-oper="+" />
													</div>
												</div>
											</div>
										</li>
										<li class="td td-sum">
											<div class="td-inner">
												<em tabindex="0" class="J_ItemSum number">{{sc.sellPrice * sc.cartNum}}</em>
											</div>
										</li>
										<li class="td td-op">
											<div class="td-inner">
												<a href="javascript:;" data-point-url="#" :data-id="index" @click="deleteShoppingCart" class="delete">删除</a>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</tr>
					</template>
				</div>
				<div class="clear"></div>
				<div class="float-bar-wrapper">
					<div class="float-bar-right">
						<div class="amount-sum">
							<span class="txt">已选商品</span>
							<em id="J_SelectedItemsCount">{{opts.length}}</em><span class="txt">件</span>
							<div class="arrow-box">
								<span class="selected-items-arrow"></span>
								<span class="arrow"></span>
							</div>
						</div>
						<div class="price-sum">
							<span class="txt">合计:</span>
							<strong class="price">¥<em id="J_Total">{{totalPrice}}</em></strong>
						</div>
						<div class="btn-area" @click="gotoOrderAdd">
							<a href="#" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
								<span>结&nbsp;算</span></a>
						</div>
					</div>
				</div>
				<div class="footer">
					<div class="footer-hd">
						<p>
							<a href="#">海淘宝商城</a>
							<b>|</b>
							<a href="#">商城首页</a>
							<b>|</b>
							<a href="#">支付宝</a>
							<b>|</b>
							<a href="#">物流</a>
						</p>
					</div>
					<div class="footer-bd">
						<p>
							<a href="#">关于海淘宝</a>
							<a href="#">合作伙伴</a>
							<a href="#">联系我们</a>
							<a href="#">网站地图</a>
							<em>©haitaobao.com 版权所有</em>
						</p>
					</div>
				</div>
			</div>
			<!--操作页面-->
			<div class="theme-popover-mask"></div>
			<div class="theme-popover">
				<div class="theme-span"></div>
				<div class="theme-poptit h-title">
					<a href="javascript:;" title="关闭" class="close">×</a>
				</div>
				<div class="theme-popbod dform">
					<form class="theme-signin" name="loginform" action="" method="post">
						<div class="theme-signin-left">
							<li class="theme-options">
								<div class="cart-title">颜色：</div>
								<ul>
									<li class="sku-line selected">12#川南玛瑙<i></i></li>
									<li class="sku-line">10#蜜橘色+17#樱花粉<i></i></li>
								</ul>
							</li>
							<li class="theme-options">
								<div class="cart-title">包装：</div>
								<ul>
									<li class="sku-line selected">包装：裸装<i></i></li>
									<li class="sku-line">两支手袋装（送彩带）<i></i></li>
								</ul>
							</li>
							<div class="theme-options">
								<div class="cart-title number">数量</div>
								<dd>
									<input class="min am-btn am-btn-default" name="" type="button" value="-" />
									<input class="text_box" name="" type="text" value="1" style="width:30px;" />
									<input class="add am-btn am-btn-default" name="" type="button" value="+" />
									<span  class="tb-hidden">库存<span class="stock">1000</span>件</span>
								</dd>
							</div>
							<div class="clear"></div>
							<div class="btn-op">
								<div class="btn am-btn am-btn-warning">确认</div>
								<div class="btn close am-btn am-btn-warning">取消</div>
							</div>
						</div>
						<div class="theme-signin-right">
							<div class="img-info">
								<img src="static/images/kouhong.jpg_80x80.jpg" />
							</div>
							<div class="text-info">
								<span class="J_Price price-now">¥39.00</span>
								<span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
							</div>
						</div>
					</form>
				</div>
			</div>
			<!--引导 -->
			<div class="navCir">
				<li><a href="home.html"><i class="am-icon-home "></i>首页</a></li>
				<li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
				<li class="active"><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
				<li><a href="person/index.html"><i class="am-icon-user"></i>我的</a></li>
			</div>
		</div>
		<script type="text/javascript" src="static/js/cookie_utils.js" ></script>
		<script type="text/javascript" src="static/js/vue.js" ></script>
		<script type="text/javascript" src="static/js/axios.min.js" ></script>
		<script type="text/javascript">
			//引入layer做弹窗提示
			var layer;
			layui.use('layer',function () {
				layer=layui.layer;
			});

			var baseUrl = "http://localhost:8080/haitaobao";
			var vm = new Vue({
				el:"#container",
				data:{
					shopcarts:[],
					token:"123",
					opts:[],
					totalPrice:0.00,
					chooseIndex:[1],
					isLogin:false,
					username:"",
				},
				watch:{
					opts:function(){
						this.totalPrice = 0;
						for(var i=0; i<this.opts.length; i++){
							var index = this.opts[i]; //index就是选择的购物车记录的索引
							this.totalPrice = this.totalPrice + this.shopcarts[index].cartNum * this.shopcarts[index].sellPrice;
						}
					}
				},
				created:function(){
					//获得username
					var username = getCookieValue("username");
					if (username!=null){
						this.isLogin=true;
						this.username=username;
					}
					//当进入到购物车页面时，就要查询购物车列表(访问购物车列表接口)
					var token=getCookieValue("token")
					var userId=getCookieValue("userId");
					if (token==null){
						var flag = confirm("请先登录");
						if (flag==true) {
							window.location.href = "login.html";
						}else {
							window.location.href = "index.html";
						}
					}else{
						//有token说明已经登录过了，可以进行请求获得用户对应的购物车列表了
						var getShoppingCartsUrl=baseUrl+"/shoppingCart/getShoppingCarts";
						axios({
							url:getShoppingCartsUrl,
							method:"post",
							headers:{
								token:this.token
							},
							data:{
								userId:userId,
							}
						}).then((res)=>{
							// if (res.data.code==20002 || res.data.code==20001){
							// 	//token过期
							// 	var loginUrl="login.html?tips=请先登录！&returnUrl=shopcart.html";
							// 	window.location.href=encodeURI(loginUrl);
							// }else if (res.data.code==10000){
							// 	//登录成功
							//	this.token=token;
							// }else if (res.data.code==10001){
							// 	//请求失败
							//
							// }
							if (res.data.code==200){
								this.shopcarts=res.data.data;
							}else {
								console.log("获取购物车列表失败")
							}
						})
					}
				},
				methods:{
					changeNum:function (event) {
						var oper = event.srcElement.dataset.oper;
						var index = event.srcElement.dataset.id;
						if(oper =="+"){
							this.shopcarts[index].cartNum = parseInt( this.shopcarts[index].cartNum )+1;
						}else if(oper =="-" && this.shopcarts[index].cartNum>1){
							this.shopcarts[index].cartNum = parseInt( this.shopcarts[index].cartNum )-1;
						}
						//请求购物车修改接口： cartId  num
						var cartId = this.shopcarts[index].cartId;
						console.log("res:");
						console.log(cartId);
						var cartNum = this.shopcarts[index].cartNum;
						var updateCartNumUrl = baseUrl+"/shoppingCart/updateCartNum";
						axios({
							url:updateCartNumUrl,
							method:"post",
							headers:{
								token:this.token
							},
							data:{
								cartId:cartId,
								cartNum:cartNum
							}
						}).then((res)=>{
							console.log(res);
							if(res.data.code=200){
								this.totalPrice = 0;
								for(var i=0; i<this.opts.length; i++){
									var index = this.opts[i]; //index就是选择的购物车记录的索引
									this.totalPrice = this.totalPrice + this.shopcarts[index].cartNum * this.shopcarts[index].sellPrice;
								}
							}
						});
					},
					gotoOrderAdd:function(){
						if(this.opts.length ==0){
							alert("请选择要购买的商品！")
						}else{
							//1.获取选择购物车记录的id [0,2]  --->  cartId 8   cartId 10 --- 8,10,
							var cids="";
							for(var i=0;i<this.opts.length; i++){
								var index = this.opts[i];
								var cartId = this.shopcarts[index].cartId;
								if(i < this.opts.length-1){
									cids = cids + cartId + ",";
								}else{
									cids = cids + cartId;
								}
							}
							//2.跳转到order-add.html，并cids传递过去
							window.location.href="order-add.html?cids="+cids;
						}
					},
					deleteShoppingCart:function (event) {
						var index=event.srcElement.dataset.id;
						//获得要删除的shoppingCartId
						var cartId=this.shopcarts[index].cartId;
						console.log(cartId);
						var flag=confirm("你确定要删除吗");
						if (flag==true){
							var deleteShoppingCartUrl=baseUrl+"/shoppingCart/deleteShoppingCart"
							axios({
								url:deleteShoppingCartUrl,
								method:"post",
								headers:{
									token:this.token,
								},
								data:{
									cartId: cartId
								}
							}).then((res)=>{
								if (res.data.code==200){
									layer.msg("删除成功");
									window.location.href="shopcart.html";
								}else {
									layer.msg("删除失败");
								}
							})
						}
					}
				}
			});
		</script>
		
		
	</body>

</html>